<template>
  <div>
    <div class="small-images-container" v-if="smallImages.length > 0">
      <div v-for="(image, index) in smallImages" :key="index" class="image-wrapper">
        <img :src="image.src" :alt="`图片${index + 1}`" class="small-image">
        <div class="info-wrapper">
          <span class="title-text">{{ image.title }}</span>
        </div>
      </div>
    </div>

    <div v-else class="loading-container">
      <div class="loader"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import {
  baseURL,
  getHomeStatisticAPI
} from '../apis/homeAPI.js'; // 导入所需的 API

const smallImages = ref([]);

// 获取小图片数据的函数
const getHomeStatistic = async () => {
  try {
    const res = await getHomeStatisticAPI();
    const { data } = res;
    smallImages.value = data.map(item => ({
      src: baseURL + `${item.attributes.src.data.attributes.url}`,
      title: item.attributes.title,
      value: item.attributes.value,
    }));
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

onMounted(() => {
  getHomeStatistic(); // 调用函数以获取数据
});
</script>

<style scoped>
.small-images-container {
  max-width: 1500px;
  margin: 20px auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.info-wrapper {
  text-align: center;
  margin-top: 5px;
}

.title-text {
  font-weight: bold;
  white-space: nowrap;
}

.small-image {
  width: 100px;
  height: 100px;
  margin: 0 10px;
  border-radius: 10px;
  object-fit: cover;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px; /* 设置高度以使加载图标居中 */
}

.loader {
  border: 8px solid rgba(255, 255, 255, 0.3); /* 背景透明的边框 */
  border-top: 8px solid #3498db; /* 顶部颜色 */
  border-radius: 50%; /* 圆形 */
  width: 50px; /* 图标宽度 */
  height: 50px; /* 图标高度 */
  animation: spin 1s linear infinite; /* 旋转动画 */
}

/* 定义旋转动画 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
